import { h, fragment } from '@knno/dom/jsx';
import { Field } from '@knno/ui/jsx/field';
import { Caption, Card } from '@knno/ui/jsx/card';
import { Dialog } from '@knno/ui/dialog';
import { Button } from '@knno/ui/jsx/button';
import SVGPerson from '@material-design-icons/svg/filled/person.svg';

export function ShowField() {
	return (
		<>
			<h2>属性字段(适合移动端)</h2>
			<Field label="属性1" />
			<Card>
				<Field label="属性属性属性2属性属性属性2" value="这是属性值" />
			</Card>
			<Card>
				<Field label="属性属性属性2" type="input" value="这是属性值" placeholder="请输入" />
				<Field label="属性属性属性 disabled" type="input" value="这是属性值" disabled placeholder="请输入" />
				<Field label="属性属性属性2" icon={SVGPerson} type="input" value="这是属性值" placeholder="请输入" />
				<Field label="这是一个开关" type="toggle" value="这是属性值" />
				<Field
					label="这是一个开关"
					type="toggle"
					checked={true}
					onchecked={() => {
						alert('checked');
					}}
				/>
				<Field class="clickable " label="带图标的" icon={SVGPerson} onclick={() => Dialog.alert('click item')} />
			</Card>
			<Card>
				<Field label="带图标的" icon={SVGPerson} type="entry" />
				<Field
					label="带图标的"
					icon={SVGPerson}
					type="entry"
					value="这是属性值属性属性属性2属性属性属性2属性属性属性2"
				/>
			</Card>
			<Caption>属性组</Caption>
			<Card>
				<Field
					label="主标题属性属性属性2属性属性属性2属性属性属性2"
					icon={SVGPerson}
					type="subject"
					value="标题描述信息标题描述信息标题描述信息标题描述信息"
				/>
				<Field label="标题" type="subject-entry" value="描述信息" />
				<Field
					label="主标题属性属性属性2属性属性属性2属性属性属性2"
					icon={SVGPerson}
					type="subject-entry"
					value="标题描述信息标题描述信息标题描述信息标题描述信息"
				/>
				<Field label="带图标的1123" icon={SVGPerson} type="subject-entry" />
			</Card>
			<Button type="primary" class="block round">
				确认按钮
			</Button>
			<Button type="danger" class="block round">
				删除按钮
			</Button>
		</>
	);
}
